<template>
  <div class="down">
   <div class="guang">
    <img src="@/assets/index/long-down/guanggao.jpg" alt="">
   </div>
   <!-- 热门推荐 -->
   <div class="hot">
    <h3>热门推荐</h3>
    <div>
        <div>
            <p>滴滴青桔单车 <br><span>轻便绿色出行</span></p>
            <img src="@/assets/index/long-down/bicycle-0.jpg" alt="">
        </div>
        <div>
            <p>哈罗出行 <br><span>行好每一程</span></p>
            <img src="@/assets/index/long-down/bicycle-1.jpg" alt="">
        </div>
    </div>
   </div>
   <!-- 龙支付享优惠 -->
   <div class="you">
    <h3>龙支付享优惠</h3>
    <div> 
        <div>
            <img src="@/assets/index/long-down/hui-0.jpg" alt="">
            <p>惠生活</p>
            <span>好惠小帮手</span>
        </div>
        <div>
            <img src="@/assets/index/long-down/hui-1.jpg" alt="">
            <p>优惠卡券</p>
            <span>优惠券派发</span>
        </div>
        <div>
            <img src="@/assets/index/long-down/hui-2.jpg" alt="">
            <p>热门活动</p>
            <span>福利甄选</span>
        </div>
    </div>

   </div>
   <!-- 龙支付常相伴 -->
   <div class="ban">
    <h3>龙支付常相伴</h3>
    <div>
        <img src="@/assets/index/long-down/ban-0.jpg" alt="">
        <img src="@/assets/index/long-down/ban-1.jpg" alt="">
        <img src="@/assets/index/long-down/ban-2.jpg" alt="">
        <img src="@/assets/index/long-down/ban-3.jpg" alt="">
        <img src="@/assets/index/long-down/ban-4.jpg" alt="">
        <img src="@/assets/index/long-down/ban-5.jpg" alt="">
        <img src="@/assets/index/long-down/ban-6.jpg" alt="">
    </div>
   </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
    .down {
        background: #f5f5f5;
        overflow: hidden;
    }
.guang {
    width: 90%;
    margin: auto;
    margin-top: .9rem;
    img {
        width: 100%;
    }
}

h3 {
  margin-bottom: .2rem;
}
// 热门推荐
.hot,.you,.ban  {
    width: 90%;
    // height: 1.35rem;
    background: #fff;
    margin: auto;
    margin-top: .2rem;
    border-radius: .15rem;
    box-sizing: border-box;
    padding: .15rem;

}
.hot {
    >div {
        width: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        >div {
            width: 49%;
            height: .6rem;
            background: #f3f8fb;
            display: flex;
            align-items: center;
            justify-content: space-around;
            span {
                font-size: .12rem;
                color: #3d3d3d;
            }
            img {
                width: .35rem;
                height: .3rem;
            }
        }
    }
}
// 龙支付享优惠
.you {
    width: 90%;
    background: #fff;
    margin: auto;
    margin-top: .2rem;
    border-radius: .15rem;
    box-sizing: border-box;
    padding: .15rem;
    >div {
        display: flex;
        justify-content: space-between;
        >div {
            display: flex;
            flex-direction: column;
            align-items: center;
            span {
                font-size: .12rem;
                color: #3d3d3d;
            }
        }
    }
}
// 龙支付常相伴
.ban {
    >div {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        img {
            width: 49%;
            margin-bottom: .05rem;
        }
    }
}
</style>